<template>
  <div class="details-tabs">
    <van-tabs v-model="activeName" color="#1989fa">
      <van-tab title="商品" name="product">
        <scroll-pruduct-item :shop-id="restaurant_id"></scroll-pruduct-item>
      </van-tab>
      <van-tab title="评价" name="evaluate">
        <!-- 评价 -->
        <evaluation-top  :evaluation_list="evaluation_list"></evaluation-top>
        <evaluation-center :evaluation_categroy="evaluation_categroy"></evaluation-center>
        <evaluation-message :shop-id="restaurant_id"></evaluation-message>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import ScrollPruductItem from "@/components/ScrollPruductItem";
import EvaluationTop from "@/components/EvaluationTop";
import EvaluationCenter from "@/components/EvaluationCenter";
import EvaluationMessage from "@/components/EvaluationMessage";

import {FoodList, EvaluationList, EvaluationCategroy} from "@/request/api"

export default {
  components: { ScrollPruductItem, EvaluationTop, EvaluationCenter, EvaluationMessage },
  data() {
    return {
      activeName: "product",
      evaluation_list: null,
      evaluation_categroy: [],
      restaurant_id: null,
      food_list: []
    };
  },
  props: ["id"],
  mounted() {
    let restaurant_id = this.id ? this.id : null;
    this.restaurant_id = this.id ? this.id : null;

    // 获取评价分数
    EvaluationList(restaurant_id).then(res => {
      this.evaluation_list = res.data;
    });

    // 获取评价分类
    EvaluationCategroy(restaurant_id).then(res => {
      this.evaluation_categroy = res.data;
    });
  }
};
</script>

<style lang="less">
.details-tabs {
  display: flex;
  flex: 1;
  z-index: 6;
  .van-tabs {
    width: 100%;
  }
  .van-tabs__line {
    height: 8px;
  }
  .van-tabs--line .van-tabs__wrap {
    height: 100px;
    .van-tab {
      line-height: 100px;
      .van-tab__text {
        font-size: 30px;
      }
    }
  }
  .van-tabs__content, .van-tab__pane{
    height: 100%;
    box-sizing: border-box;
  }

}
</style>